<template>
  <a-layout class="custom-layout">

    <a-layout-header style="background: #fff; padding: 0">
      <div class="header">
        <img class="header-logo" :src="book">
        <span class="header-title">家教管家教师端</span>
        <div class="empty"></div>
        <span>🌹Hello，{{ userStore.user_name }}</span>
        <a @click="showChatList = true">聊天</a>
        <a style="margin-right: 10px;" @click="handlePreview">切换家长身份</a>
        <a class="header-quit" @click="handleLogout">退出登录</a>
      </div>
    </a-layout-header>

    <a-layout>
      <!-- 侧边导航菜单 -->
      <a-layout-sider v-model="collapsed" collapsible>
        <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline" @click="handleMenuClick">
          <a-sub-menu key="schedule">
            <template #icon>
              <calendar-outlined />
            </template>
            <template #title>课程管理</template>
            <a-menu-item key="sure">待确认</a-menu-item>
            <!-- <a-menu-item key="will">即将开始</a-menu-item> -->
            <a-menu-item key="ing">进行中</a-menu-item>
            <a-menu-item key="over">已结束</a-menu-item>
            <a-menu-item key="canceled">已取消</a-menu-item>
          </a-sub-menu>

          <a-sub-menu key="assignment">
            <template #icon>
              <file-text-outlined /> 
            </template>
            <template #title>作业管理</template>
            <a-menu-item key="publish">发布作业</a-menu-item>
            <a-menu-item key="record">已发布的作业</a-menu-item>
            <!-- <a-menu-item key="correct">批改作业</a-menu-item> -->
          </a-sub-menu>

          <a-menu-item key="teachingAnalysis">
  <line-chart-outlined />
  <span>教学分析</span>
</a-menu-item>

          <a-menu-item key="finance">
            <dollar-outlined />
            <span>财务信息</span>
          </a-menu-item>

          <a-menu-item key="courseManage">
            <book-outlined />
            <span>信息管理</span>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>

      <!-- 内容区域 -->
      <a-layout-content :style="{
        margin: '16px', minHeight: '280px', overflowY: 'auto',
        height: 'calc(100vh - 128px)'
      }">
        <router-view />
      </a-layout-content>
    </a-layout>

    <ChatList v-if="showChatList" @close="showChatList = false" @select-user="handleSelectUser" />

    <ChatBox v-if="showChatBox" :show="showChatBox" :target-user-id="selectedUserId"
      :target-user-name="selectedUserName" @close="handleCloseChatBox" />
  </a-layout>

  <div class="deepseek-float-btn" @click="showChatModal = true">
    <img :src="deepseeklog" alt="AI助手" />
  </div>

  <a-modal v-model:visible="showChatModal" title="DeepSeek AI助手" width="600px" :footer="null"
    :bodyStyle="{ padding: '0', height: '60vh', display: 'flex' }">
    <AiChat />
  </a-modal>
</template>

<script setup lang="ts">

import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from "/@/store";
import Header from '/@/views/index/components/header.vue'
import {
  BookOutlined,
  CalendarOutlined,
  DollarOutlined,
  FileTextOutlined,
  LineChartOutlined
} from '@ant-design/icons-vue';
import Book from '/@/assets/icons/book.svg'
import ChatList from '/@/views/index/components/ChatList.vue';
import ChatBox from '/@/views/index/components/ChatBox.vue';
import AiChat from '/@/components/AiChat.vue'
import { Modal as AModal } from 'ant-design-vue'
import Deepseeklog from '/@/assets/icons/deepseek.jpeg';


const userStore = useUserStore();
const router = useRouter();
const selectedKeys = ref<string[]>([]);
const collapsed = ref(false);
const showChatList = ref(false);
const showChatBox = ref(false);
const selectedUserId = ref('');
const selectedUserName = ref('');
const showChatModal = ref(false);
const deepseeklog = Deepseeklog;

const book = Book;

const handleMenuClick = ({ key }) => {
  if (key === 'correct') {
    // 跳转到作业列表页而不是直接批改页
    router.push({ name: 'record' });
  } else {
    router.push({ name: key });
  }
};
// 保持与main.vue一致的预览/退出逻辑
const handlePreview = () => {
  const route = router.resolve({ name: 'portal' });
  window.open(route.href, '_blank');
};

const handleLogout = () => {
  userStore.logout().then(() => {
    router.push({ name: 'login' });
  });
};

// 处理用户选择
const handleSelectUser = (user: { id: string; name: string }) => {
  selectedUserId.value = user.id;
  selectedUserName.value = user.name;
  showChatList.value = false; // 关闭列表
  showChatBox.value = true;   // 打开聊天窗口
};

// 关闭聊天窗口
const handleCloseChatBox = () => {
  showChatBox.value = false;
  showChatList.value = true; // 重新显示聊天列表
};
</script>

<style scoped>
.custom-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  --primary-color: #2c3e50;
  --secondary-color: #3498db;
  --bg-color: #f8f9fa;
  --text-color: #2d3436;
}

/* 头部样式 */
.custom-layout .ant-layout-header {
  background: var(--primary-color) !important;
  height: 64px;
  line-height: 64px;
  padding: 0 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  /* 防止内容溢出 */
}


.header-logo {
  height: 48px;
  width: auto;
  margin-right: 16px;
  margin-left: 20px;
  filter: brightness(0) invert(1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 悬停效果保持 */
.header-logo:hover {
  transform: translateY(-2px);
  filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(255, 255, 255, 0.3));
  /* 白色投影 */
}

.header {
  display: flex;
  align-items: center;
  color: white;
  width: 100%;
  max-width: 1400px;
  /* margin: 0 auto; */
}

.header-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-right: auto;
}

.header a {
  color: rgba(255, 255, 255, 0.85);
  margin-left: 2.5rem;
  cursor: pointer;
  transition: color 0.3s;
}

.header a:hover {
  color: white;
}

.header-quit {
  margin-left: 2.5rem;
}

.header .ant-btn {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.header .ant-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* 侧边栏样式 */
.ant-layout-sider {
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
  height: calc(100vh - 64px);
  overflow-y: auto;
}

.ant-menu {
  border-right: none !important;
}

.ant-menu-item,
.ant-menu-submenu-title {
  margin: 6px 8px !important;
  border-radius: 6px !important;
  transition: background 0.2s !important;
}

.ant-menu-item-selected {
  background: var(--secondary-color) !important;
  color: white !important;
}

.ant-menu-item:hover,
.ant-menu-submenu-title:hover {
  background: rgba(52, 152, 219, 0.1) !important;
}

/* 内容区域 */
.ant-layout-content {
  padding: 20px;
  background: var(--bg-color);
  margin: 16px;
  border-radius: 8px;
  min-height: calc(100vh - 96px);
  overflow-y: auto;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .ant-layout-sider {
    position: fixed !important;
    height: 100vh;
    z-index: 100;
  }

  .ant-layout-content {
    margin-left: 0 !important;
    padding: 16px;
  }
}


.course-container {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
}

.ant-card-head-title {
  font-weight: 600 !important;
}

.ant-card-extra {
  display: flex;
  align-items: center;
}

.deepseek-float-btn {
  position: fixed;
  left: 10px;
  bottom: 80px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 1000;

  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }

  &:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  }
}
</style>